<template>
    <div class="see_order_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>财务</el-breadcrumb-item>
            <el-breadcrumb-item>合作商订单管理</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="see_order_card">

            <!-- title -->
            <el-row class="title">
                <el-col>订单流程</el-col>
            </el-row>

            <div class="steps">
                <el-steps align-center :active="orser_step" finish-status="success">
                    <el-step :description='data.create_time' title="用户下单"></el-step>
                    <el-step :description='data.pay_time' title="用户付款"></el-step>
                    <el-step :description='data.travel_time' title="按时出发"></el-step>
                    <el-step :description='data.completion_time' title="订单完成"></el-step>
                </el-steps>
            </div>
        </el-card>

        <el-row type="flex" justify="space-between">
            <el-col>
                <el-card class="see_order_card he_390">

                    <!-- title -->
                    <el-row class="title">
                        <el-col>用户信息</el-col>
                    </el-row>

                    <div class="user_info_box" v-for="item in data.info" :key="item.id">
                        <div class="img_box">
                            <img :src="item.visa_photo" class="img" alt="">
                        </div>

                        <div class="text_box">
                            <div class="item">
                                <div class="k">姓名：</div>
                                <div class="val">{{item.real_name}}</div>
                            </div>

                            <div class="item">
                                <div class="k">护照号：</div>
                                <div class="val">{{item.passport_number}}</div>
                            </div>

                            <div class="item">
                                <div class="k">身份证号：</div>
                                <div class="val">{{item.indentity_number}}</div>
                            </div>

                            <div class="item">
                                <div class="k">有效期：</div>
                                <div class="val">{{item.expiry_date}}</div>
                            </div>
                        </div>
                    </div>

                </el-card>
            </el-col>

            <el-col>
                <el-card class="see_order_card he_390">

                    <!-- title -->
                    <el-row class="title">
                        <el-col>基本信息</el-col>
                    </el-row>

                    <div class="base_info_box">

                        <div class="text_box">
                            <div class="item">
                                <div class="k">订单编号：</div>
                                <div class="val">{{data.sn}}</div>
                            </div>

                            <div class="item">
                                <div class="k">购买人数：</div>
                                <div class="val">1</div>
                            </div>

                            <div class="item">
                                <div class="k">下单时间：</div>
                                <div class="val">{{data.create_time}}</div>
                            </div>

                            <div class="item">
                                <div class="k">出发时间：</div>
                                <div class="val">{{data.depart_date}}</div>
                            </div>

                            <div class="item">
                                <div class="k">订单状态：</div>
                                <div class="val">{{data.oerder_status}}</div>
                            </div>

                            <div class="item">
                                <div class="k">实付金额：</div>
                                <div class="val">{{data.pay_price}}</div>
                            </div>

                            <div class="item">
                                <div class="k">联系人：</div>
                                <div class="val">{{data.linkman}}</div>
                            </div>

                            <div class="item">
                                <div class="k">联系电话：</div>
                                <div class="val">{{data.mobile}}</div>
                            </div>
                        </div>
                    </div>

                </el-card>
            </el-col>
        </el-row>

        <el-card class="see_order_card">

            <!-- title -->
            <el-row class="title">
                <el-col>产品信息</el-col>
            </el-row>

            <div class="padd">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="goods_name" label="名称" width="450">
                        <div slot-scope="scope" class="name_box">
                            <img :src="scope.row.goods_name.img" class="img" alt="">

                            <div class="text">{{scope.row.goods_name.title}}</div>
                        </div>
                    </el-table-column>
                    <el-table-column prop="type" label="所属类型">
                    </el-table-column>
                    <el-table-column prop="price" label="购买价格">
                    </el-table-column>
                    <el-table-column prop="supplier" label="供应商">
                    </el-table-column>
                </el-table>
            </div>
        </el-card>

    </div>
</template>

<script src='../../../static/js/operatorder/see_order.js'></script>

<style scoped>
@import "../../../static/css/operatorder/see_order.css";
</style>

